<style lang="less">
    @import './list.less';
</style>

<template>
	<div>
        <Row>
        	<Card class="sys-user">
        		<p slot="title">
                    <Icon type="ios-list"></Icon>
                   	用户列表
                </p>
                <Form ref="search" :model="search" inline>
                    <FormItem prop="user">
                        <Input type="text" v-model="search.sysUser.login_name" placeholder="登录名">
                            <Icon type="ios-person-outline" slot="prepend"></Icon>
                        </Input>
                    </FormItem>
                    <FormItem prop="password">
                        <Input type="password" v-model="search.sysUser.password" placeholder="密码">
                            <Icon type="ios-locked-outline" slot="prepend"></Icon>
                        </Input>
                    </FormItem>
                    <FormItem>
                        <Button type="primary" @click="searchHandler(1)">查询</Button>
                    </FormItem>
                </Form>
                <Row type="flex" justify="center" align="middle" class="list-row">
                    <Table :columns="listColumns" :data="page.list" style="width: 100%;" :loading="loading"></Table>
                </Row>
                <Row type="flex" class="list-router">
                    <Page :total="page.totalRow" :page-size="page.pageSize" show-sizer show-elevator show-total @on-change="changePage" @on-page-size-change="changePageSize"></Page>
                </Row>
        	</Card>
        </Row>
    </div>
</template>

<script>
    import util from '@/libs/util.js';
    import urls from '@/store/modules/urls.js';

    export default {
        name: 'list',
        data () {
            return {
                search: {
                    sysUser: {
                        login_name: '',
                        password: ''
                    }
                },
                loading: true,
                listColumns: [
                    {
                        type: 'selection',
                        key: 'id',
                        fixed: 'left',
                        width: 60
                    },
                    {
                        title: '登录名',
                        key: 'login_name',
                        align: 'center'
                    },
                    {
                        title: '密码',
                        key: 'password',
                        align: 'center'
                    },
                    {
                        title: '查看详情',
                        key: 'show_more',
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            let query = {id: params.row.id};
                                            this.$router.push({
                                                path: 'edit/' + query.id
                                            });
                                        }
                                    }
                                }, '编辑'),
                                h('Poptip', {
                                    props: {
                                        confirm: true,
                                        title: '您确认删除这条内容吗？'
                                    },
                                    on: {
                                        'on-ok': () => {
                                            this.delete(params.row.id);
                                        }
                                    }
                                }, [
                                    h('Button', {
                                        props: {
                                            type: 'error',
                                            size: 'small'
                                        }
                                    }, '删除')
                                ])
                            ]);
                        }
                    }
                ],
                page: {
                    list: [],
                    pageNumber: 1,
                    pageSize: 10,
                    totalPage: 1,
                    totalRow: 0
                }
            };
        },
        created () {
            this.changePage(this.page.pageNumber);
        },
        methods: {
            searchHandler (pageNumber) {
                this.search.pageNumber = pageNumber;
                this.search.pageSize = this.page.pageSize;
                util.ajax.get(urls.sysUserPage + util.urlConcat(this.search)).then((response) => {
                    let data = response.data;
                    if (!data) {
                        this.$Message.error('请求失败!');
                    } else if (data.code === 200) {
                        this.page = data.data;
                        this.loading = false;
                    } else {
                        this.$Message.error(data.message);
                    }
                });
            },
            changePage (pageNumber) {
                this.searchHandler(pageNumber);
            },
            changePageSize (pageSize) {
                this.page.pageSize = pageSize;
                this.changePage(1);
            },
            delete (id) {
                let params = {
                    'id': id
                };
                util.ajax.get(urls.sysUserDelete + util.urlConcat(params)).then((response) => {
                    let data = response.data;
                    if (!data) {
                        this.$Message.error('请求失败!');
                    } else if (data.code === 200) {
                        this.searchHandler(this.search.pageNumber);
                    } else {
                        this.$Message.error(data.message);
                    }
                });
            }
        }
    };
</script>